前言

昨天我們完成了圖片上傳的功能，今天就將它顯示在活動列表頁面吧！

Repository

EventsRepository

目前的 GetEvents() 是沒有取 EventsImage 資料的，這裡要補上撈取 EventsImage 的程式碼。
要注意的是，因為 Events Model 中，EventsImage 的型別是 ICollection，所以要使用 ToList()，用 List 來儲存回傳的資料，並賦值在 Events.EventsImage：

Service

EventsImageUploadService

這邊要修正一下 Code，原本 FileStream 的第一個參數是放 FileName，但其實應該是要放 FilePath 才對，否則上傳的圖片會儲存在專案根目錄，不會在 wwwroot：

View

Index.cshtml

在顯示 Events 資料的 foreach 迴圈，加入 img 的 Tag Helper，這邊我做了判斷式，雖然先前提到盡量不要在 View 寫邏輯，但目前還沒想到更好的方式，也許自製 Tag Helper 或 Partial View 可以更好？

• 若 EventsImage 非 Null：

  • src 指向 wwwroot 的 Upload 資料夾，加上圖片檔名作為路徑

• 若 EventsImage 為 Null：

  • src 指定為 images 中的 logo.png 檔案，這邊我使用免費 Logo 製作網站，可以參考 Reference～

• 將圖片尺寸指定為 500 * 300，避免圖片顯示過大導致跑版。

實際成果

先前上傳圖片功能還沒做好的資料，EventsImage 為空，所以顯示了預設的 Logo 檔案；
而新建立的 Events 資料則有上傳圖片，可以看到有正常顯示圖片檔。

本日結語

到今天的內容，總算是將 CRUD 的功能都完成了，明天開始會導入 ASP.NET Core Identity，為網站建立註冊、登入、權限等進階功能。

那麼我們明天見！

Reference

Free Logo Maker - Create a Logo in Seconds - Shopify